

import { Button } from 'antd';
import { inject, observer } from 'mobx-react';
import React from 'react'
import LoadingDrewer from '../../store/loadingDrewer';
import'./Loading1.less'

const Loading1 = inject("loadingDrewer")(observer((props: {}&{loadingDrewer?: LoadingDrewer}) => {
    const showDrawer = () => {
        props.loadingDrewer!.setMd(md)
        props.loadingDrewer!.setVisible(true)
    };

    const test = [{ 0: "103" , 1: "104" }, { 0:  "103" } , {0:  "103" , 1 :  "104" } , { 0:  "103" }]
    const testArr = test.map(v => Object.values(v))
    let nowArr = testArr[0]
    for (let index = 1; index < testArr.length; index++) {
        nowArr = nowArr.filter(item => testArr[index].includes(item));
    }
    console.log(nowArr)

    const md: string = `### html

~~~html
<div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
~~~

### css

~~~css
.loading span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: #32aacc;
    animation: load 1s ease infinite;
}
@keyframes load{
    0%,100%{
        height: 40px;
        margin: 0 2px;
        background: #32aacc;
    }
    50%{
        height: 70px;
        margin: -15px 2px;
        background: #faaacc;
    }
}
.loading span:nth-child(2){
    animation-delay:0.2s;
}
.loading span:nth-child(3){
    animation-delay:0.4s;
}
.loading span:nth-child(4){
    animation-delay:0.6s;
}
.loading span:nth-child(5){
    animation-delay:0.8s;
}
~~~
`
    return (
        <div className="Loading1 Loading">
            <div className="demoshow">
                <div className="loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div className="bottomBtn">
                <Button type="primary" onClick={showDrawer}>{`<code />`}</Button>
            </div>
        </div>
    )
}))

export default Loading1